<template>
    <div>
        <a-button :size="buttonSet.size || 'large'" @click="handClick">{{ headTItle }}</a-button>
        <a-modal :visible="visible" :title="headTItle" :footer="null" @cancel="cancel" width="880px"
            :bodyStyle="{ padding: '0px 12px 12px' }">
            <div class="modleHead" v-if="type == 'ppt'">
                <a-space>
                    <a-date-picker :allowClear="false" :value="dateTime" @change="onDateChange" />
                    <a-button type="default" class="defaultButton" @click="handOnRefresh">
                        <a-icon class="iconWrap" type="sync"></a-icon>
                    </a-button>
                </a-space>
            </div>
            <a-table :columns="columns" :scroll="{ y: '60vh', }" :loading="loading" size="small" :pagination="false"
                :dataSource="list" row-key="id">
                <a-space slot="options" slot-scope="text, record">
                    <ShowModal :record="record" :id="record.id">
                        <a-tooltip placement="top" title="详情">
                            <a-button size="small" type="link">
                                <ZSIcon icon="icon-xiangqing"></ZSIcon>
                            </a-button>
                        </a-tooltip>
                    </ShowModal>
                    <template>
                        <a-popconfirm title="确定进行交班操作吗？" ok-text="确定" cancel-text="取消"
                            @confirm="() => confirm(record.id)">
                            <a-button type="link" size="small" :loading="jbLoading == record.id">交班</a-button>
                        </a-popconfirm>
                    </template>
                </a-space>
            </a-table>
            <div class="footer">
                <span>共{{ total }}条</span>
                <a-pagination size="small" :current="pagination.pageNum" :pageSize="pagination.pageSize"
                    class="pagination" :total="total" show-size-changer show-quick-jumper @change="paginChange"
                    @showSizeChange="onShowSizeChange"></a-pagination>
            </div>
        </a-modal>
    </div>
</template>
<script>
import moment from 'moment';
import { staticColumns } from './js/static.js'
import ShowModal from "@/components/ZSModal/ShowDialog.vue";
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';

export default {
    name: 'showModalTable',
    components: {
        ShowModal,ZSIcon
    },
    props: {
        type: {
            type: String,
        },
        buttonSet: {
            type: Object,
            default: () => {
                return {}
            }
        },
        onCallBack: {
            type: Function,
            default: () => { }
        }
    },
    data() {
        return {
            visible: false,
            columns: [],
            pagination: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            list: [],
            loading: false,
            jbLoading: '',
            dateTime: '',
        }
    },
    mounted() {
        this.columns = staticColumns[this.type];
    },
    methods: {
        handOnRefresh() {
            this.getList();
        },
        handClick() {
            if (this.type == 'ppt') {
                this.dateTime = moment().format('YYYY-MM-DD');
            }
            this.visible = true;
            this.getList();
        },
        cancel() {
            this.visible = false;
            this.list = [];
            this.init();
        },
        getList(aParams) {
            let params = {
                ...this.pagination,
                ...aParams,
            };
            let url;
            if (this.type == 'apply') {
                url = this.$myPageList
            } else if (this.type == 'ppt') {
                url = this.$pageJiaoBanList
                params = {
                    date: this.dateTime,
                    ...params,
                }
            }
            if (!url) {
                return;
            }
            this.loading = true;
            this.getAxios(url, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.pagination = {
                            ...this.pagination,
                            pageNum: params.pageNum,
                            pageSize: params.pageSize,
                        }
                        let data = res.data;
                        this.list = data.records;
                        this.total = data.total;
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.loading = false;
                });
        },
        init() {
            let pagination = {
                ...this.pagination,
                pageNum: 1,
                pageSize: 10,
            }
            this.pagination = pagination;
        },
        paginChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.getList(newPaginTion);
        },
        onShowSizeChange(current, pageSize) {
            let newPaginTion = {
                ...this.pagination,
                pageNum: current,
                pageSize,
            };
            this.pagination = newPaginTion;
            this.getList(newPaginTion);
        },
        onDateChange(m, s) {
            this.dateTime = s;
            this.getList()
        },
        confirm(id) {
            let params = {
                id,
            };
            this.jbLoading = id;
            this.getAxios(this.$unDeleteFormData, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success({
                            content: res.msg || '操作成功',
                            duration: 2.5,
                        });
                        this.getList();
                        this.onCallBack();
                    } else {
                        this.$message.error({
                            content: res.msg || '操作失败',
                            duration: 2.5,
                        });
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.jbLoading = '';
                });
        },
    },
    computed: {
        headTItle() {
            let res = '';
            switch (this.type) {
                case 'apply':
                    res = "申请记录";
                    break;
                case 'ppt':
                    res = '未交班列表';
                    break;
            }
            return res;
        }
    }
}
</script>
<style lang="less" scoped>
/* 修改表头背景色 */
.ant-table-thead>tr>th {
    background-color: rgba(9, 53, 99, 0.8);
    border-bottom: none;
}

.modleHead {
    height: 34px;
    margin: 6px 0px;
}

.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 0px 0px 0px;
    width: 100%;
}
</style>